<script>
export default {
  name: "NavHead",
  computed: {
    route() {
      return this.$store.state.route
    }
  },
  methods:{
    changeRoute(to){
        this.$store.commit("updateRoute", to)
    }
  },
  watch: {
    // currentPath(v) {
    //   console.log(v)
    //   // let name = this.route.find(item => item.path === this.currentPath)
    //   this.$store.commit("updateRoute", {
    //     name: v.name,
    //     path: v,
    //   });
    // }
  }
}
</script>

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item v-for="rou in route" :key="rou.name" :to="rou.path" @click="changeRoute(rou)">{{ rou.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<style scoped lang="scss">
.el-breadcrumb {
  margin-bottom: 15px;
}
</style>